import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import { DEFAULT_PRIMARY } from "@/config"; // 系统默认主题色配置
import { useGlobalStore } from "@/stores/module/global";
import { getLightColor, getDarkColor } from "@/utils/color"; // 颜色处理工具函数
import { asideTheme, AsideThemeType } from "@/styles/theme/aside"; // 侧边栏主题配置

/**
 * 主题管理Hook
 * 提供主题切换、颜色修改、滤镜效果等功能
 */
export const useTheme = () => {
  const globalStore = useGlobalStore();
  // 从全局状态解构需要使用的响应式属性
  const { primary, isDark, isGrey, isWeak, asideInverted, layout } = storeToRefs(globalStore);

  /**
   * 切换暗黑模式
   * 1. 切换html根元素的dark类
   * 2. 同步更新主题色系
   * 3. 设置侧边栏主题
   */
  const switchDark = () => {
    const body = document.documentElement as HTMLElement;
    // 根据暗黑模式状态切换类名
    if (isDark.value) body.setAttribute("class", "dark");
    else body.setAttribute("class", "");
    // 更新主题色并设置侧边栏主题
    changePrimary("#98db34");
    setAsideTheme();
  };
  // 灰色和弱色切换
  const changeGreyOrWeak = (type: Theme.GreyOrWeakType, value: boolean) => {
    const body = document.body as HTMLElement;
    if (!value) return body.removeAttribute("style");
    const styles: Record<Theme.GreyOrWeakType, string> = {
      grey: "filter: grayscale(1)",
      weak: "filter: invert(80%)"
    };
    body.setAttribute("style", styles[type]);
    const propName = type === "grey" ? "isWeak" : "isGrey";
    globalStore.setGlobalState(propName, false);
  };
  /**
   * 修改主题色
   * @param val 新颜色值，传入null则重置为默认颜色
   * 功能说明：
   * 1. 设置CSS变量 --el-color-primary 主色
   * 2. 生成深浅色系并更新CSS变量
   * 3. 根据暗黑模式状态调整颜色生成方向
   */
  const changePrimary = (val: string | null) => {
    // 重置为默认颜色处理
    if (!val) {
      val = DEFAULT_PRIMARY;
      ElMessage({ type: "success", message: `主题颜色已重置为 ${DEFAULT_PRIMARY}` });
    }

    // 设置基础主色
    document.documentElement.style.setProperty("--el-color-primary", val);
    // 设置暗色变体（用于hover等状态）
    document.documentElement.style.setProperty(
      "--el-color-primary-dark-2",
      isDark.value ? `${getLightColor(val, 0.2)}` : `${getDarkColor(val, 0.3)}`
    );

    // 生成9个亮度变体（light-1到light-9）
    for (let i = 1; i <= 9; i++) {
      const primaryColor = isDark.value
        ? `${getDarkColor(val, i / 10)}`  // 暗黑模式向下加深
        : `${getLightColor(val, i / 10)}`; // 明亮模式向上变浅
      document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor);
    }
    // 更新全局状态
    globalStore.setGlobalState("primary", val);
  };


  /**
   * 设置侧边栏主题
   * 主题类型规则：
   * - 横向布局使用反色主题
   * - 垂直布局且开启反色时使用反色主题
   * - 暗黑模式固定使用高级主题
   */
  const setAsideTheme = () => {
    let type: AsideThemeType = "senior"; // 默认高级主题

    // 判断布局类型
    if (layout.value == "transverse") type = "inverted";    // 横向布局
    if (layout.value == "vertical" && asideInverted.value) type = "inverted"; // 垂直布局+反色
    if (isDark.value) type = "senior"; // 暗黑模式固定主题

    // 应用主题变量到根元素
    const theme = asideTheme[type!];
    for (const [key, value] of Object.entries(theme)) {
      document.documentElement.style.setProperty(key, value);
    }
  };
  // init theme
  const initTheme = () => {
    switchDark();
    if (isGrey.value) changeGreyOrWeak("grey", true);
    if (isWeak.value) changeGreyOrWeak("weak", true);
  };


  // 根据存储状态自动应用暗黑模式
  if (isDark.value) switchDark();
 
  return {
    initTheme,
    switchDark,
    changePrimary,
    changeGreyOrWeak,
    setAsideTheme
  };
};
export namespace Theme {
  export type GreyOrWeakType = "grey" | "weak";
}
